<template>
	<div class="early-warning es-each-line">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-body am-fr">
					<div class="am-u-md-12 one-line">
						<el-select size="small" @change="handleChangeArea" class="am-u-sm-12 am-u-md-12 am-u-lg-3" v-model="query.areaTeamId" placeholder="请选择区域">
							<el-option v-for="item in areaTeams" :key="item.areaTeamId" :label="item.name" :value="item.areaTeamId">
							</el-option>
						</el-select>
						<el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable :disabled="busTeams.length === 0" v-model="query.busTeamId" placeholder="请选择业务组">
							<el-option v-for="item in busTeams" :key="item.busTeamId" :label="item.name" :value="item.busTeamId">
							</el-option>
						</el-select>
						<el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" v-model="year" type="year" :clearable="false" :editable="false" placeholder="请选择年份">
						</el-date-picker>
						<el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable v-model="query.periodId" placeholder="请选择期数">
							<el-option v-for="item in periods" :key="item.periodId" :label="item.periodName" :value="item.periodId">
							</el-option>
						</el-select>
					</div>
					<div class="am-u-md-12 one-line">
						<el-select class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" v-model="query.gradeId" clearable placeholder="请选择年级">
							<el-option label="请选择年级" value="">
							</el-option>
							<el-option v-for="item in grades" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId">
							</el-option>
						</el-select>
						<el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" v-model="query.subjectIds" multiple placeholder="请选择科目">
							<el-option v-if="index != 0" v-for="(item,index) in subjects" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" v-model="query.refundWay" clearable placeholder="请选择退费方式">
							<el-option value="0" key="0" :label="'支付宝'"></el-option>
							<el-option value="1" key="1" :label="'微信'"></el-option>
							<el-option value="2" key="2" :label="'现金'"></el-option>
							<el-option value="3" key="3" :label="'虚拟余额账户'"></el-option>
							<el-option value="4" key="4" :label="'银行卡转账'"></el-option>
						</el-select>
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
							<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
								<span class="am-icon-search"></span>查询
							</button>
							<button @click="handleExport" type="button" class="btn-search am-btn am-btn-default am-btn-success">
								<span class="am-icon-search"></span>导出
							</button>
						</div>
					</div>

					<div class="am-u-sm-12 am-form-group totalSum">
						总报名人数:{{totalObj.regPersonNum}},总退费人数：{{totalObj.refundPersonNum}},总人数退费率：{{totalObj.personRefundRate}},总报名科数：{{totalObj.regBranchNum}},总退费科数：{{totalObj.refundBranchNum}},总科数退费率：{{totalObj.branchRefundRate}}
					</div>
					<div class="am-u-sm-12">
						<el-table :data="tableData" border stripe :empty-text="tableNoDataTips" style="min-width: 100%">
							<el-table-column prop="periodName" label="期数" min-width="100">
							</el-table-column>
							<el-table-column label="业务组" prop="busTeamName" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="年级" prop="gradeName" width="150">
							</el-table-column>
							<el-table-column label="实收金额" prop="realAmount" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="退费金额" prop="refundAmount" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="报读人数" prop="regPersonNum" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="退费人数" prop="refundPersonNum" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="人数退费率" prop="personRefundRate" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="报名科数" prop="regBranchNum" min-width="100">
							</el-table-column>
							<el-table-column align="center" label="退费科数" prop="refundBranchNum" min-width="100">
							</el-table-column>
							<el-table-column align="center" prop="branchRefundRate" label="科数退费率" min-width="100">
							</el-table-column>
						</el-table>
					</div>

					<div class="am-u-lg-12 am-cf">
						<div class="am-fr">
							<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import io from '../../lib/io'
import moment from 'moment'
import Pagination from '../base/Pagination'
export default {
	data() {
		return {
			tableNoDataTips: '暂无数据',
			tableData: [],
			year: moment().format('YYYY'),
			query: {
				areaTeamId: window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '',
				busTeamId: '',
				periodId: '',
				gradeId: '',
				subjectIds: [],
				refundWay: '',
				pageNo: 1,
				pageSize: 10,
			},
			total: 0,
			periods: [],
			totalObj: {}
		}
	},
	components: {
		Pagination
	},
	watch: {
		year(newVal, oldVal) {
			this.loadPeriodData()
		}
	},
	methods: {
		getTotal() {
			io.post(io.sumRefundSituation, this.query, (data) => {
				this.totalObj = data.data
			})
		},
		handleChangeArea() {
			this.loadPeriodData()
		},
		loadPeriodData(resolve) {
			io.post(io.periodByYearAndAreaTeamId, {
				areaTeamId: this.query.areaTeamId,
				year: this.year ? moment(this.year).format('YYYY') : '',
			}, (ret) => {
				if (ret.success) {
					this.periods = ret.data;
					if (this.periods.length === 0) {
						this.$alert('当前没有设置期数')
						this.query.periodId = ''
					} else {
						let curPeriodId = ret.data.filter(item => item.isCurrent == 1)[0] ? ret.data.filter(item => item.isCurrent == 1)[0].periodId : '';
						if (curPeriodId != '') {
							this.query.periodId = curPeriodId
						} else {
							this.query.periodId = this.periods[0].periodId
						}
					}

				} else {
					this.$alert(ret.desc)
				}

				if (resolve) {
					resolve('success');
				}
			})
		},
		search() {
			this.query.pageNo = 1;
			this.handleSearch();
		this.getTotal()
		},
		handleSearch(pageNo) {
			let formData = this.getFormDate(pageNo);
			io.post(io.refundSituationPage, formData, (ret) => {
				if (ret.success) {
					this.tableData = ret.data.list;
					this.total = ret.data.total;
				}
			})
		},
		getFormDate(pageNo) {
			this.query.pageNo = pageNo || this.query.pageNo || 1
			let formData = {};
			for (var key in this.query) {
				if (Array.isArray(this.query[key])) {
					formData[key] = this.query[key].join(",");
				} else if (typeof this.query[key] === "boolean") {
					if (this.query[key]) {
						formData[key] = 1
					}
				} else {
					if ((this.query[key] + '').trim() !== '') {
						formData[key] = this.query[key];
					}
				}
			}
			return formData;
		},
		handleExport() {
			let formData = this.getFormDate();
			io.downloadFile(io.exportRefundSituation, formData);
		},
	},
	computed: {
		areaTeams() {
			return this.$root.config.areaTeams || []
		},
		busTeams() {
			let busTeams = ((this.query.areaTeamId) ? (this.$root.config.groupBusTeams[this.query.areaTeamId] || []) : [])
			if (busTeams.length) {
				this.query.busTeamId = busTeams[0].busTeamId
			}
			return busTeams
		},
		grades: function() {
			return this.$root.config.grades || []
		},
		subjects() {
			return [{ value: '', label: '全部科目' }].concat(
				this.$root.config.subjects.map(function(item) {
					return { value: item.subjectId, label: item.subjectName }
				})
			)
		}
	},
	created() {
		$(window).smoothScroll()
		let promise = new Promise((resolve, reject) => {
			this.loadPeriodData(resolve)
		});
		promise.then((value) => {
			// success
			this.handleSearch();
		this.getTotal()
		}, (error) => {
			// failure
		});

	},
}
</script>
<style lang="less" scoped>
.totalSum {
	color: #333333;
	text-align: center;
}
</style>

